<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>计算属性</h2>
      <!-- <p>倒序是: {{ msg.split("").reverse().join("") }}</p>
      <p>倒序是: {{ msg.split("").reverse().join("") }}</p>
      <p>倒序是: {{ msg.split("").reverse().join("") }}</p>
      <p>倒序是: {{ msg.split("").reverse().join("") }}</p> -->

      <!-- <p>倒序是: {{ reverseMsg() }}</p>
      <p>倒序是: {{ reverseMsg() }}</p>
      <p>倒序是: {{ reverseMsg() }}</p>
      <p>倒序是: {{ reverseMsg() }}</p> -->

      <p>倒序是: {{ reverseMsg }}</p>
      <p>倒序是: {{ reverseMsg }}</p>
      <p>倒序是: {{ reverseMsg }}</p>
      <p>倒序是: {{ reverseMsg }}</p>

      <ul>
        <li v-for="item in oddList">{{ item }}</li>
      </ul>

      <div>
        <input type="number" v-model="num1" /> +
        <input type="number" v-model="num2" /> =
        <span>{{ total }}</span>
      </div>

      <button v-on:click="fn">btn</button>
    </div>

    <script src="./lib/Vue3.js"></script>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            msg: "hello Vue!",
            list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            num1: 3,
            num2: 4,
          };
        },

        // 事件处理函数的时候，优先使用methods
        // methods: {
        //   // 用methods去解决这个问题的时候会调用多次
        //   reverseMsg() {
        //     console.log(123);
        //     return this.msg.split("").reverse().join("");
        //   },
        // },

        // 计算属性
        // 根据现有的data等，计算或者过滤出一个我们想要的结果
        // 计算属性看似写的是函数，实际上就是这个函数的返回值
        // 计算属性是有缓存的，下次调用的时候就可以直接使用这个结果

        // 计算属性的值要依赖于响应式数据(可以同时依赖多个响应式数据)
        // 只要以来的响应式数据发生改变，那么计算属性就会重新求值

        // 计算属性里面不能出现异步，必须要立即return
        // 计算属性是不能被主动修改的(只读), 修改计算属性唯一的方式就是修改它的响应式依赖
        computed: {
          reverseMsg() {
            return this.msg.split("").reverse().join("");
          },
          oddList() {
            return this.list.filter((item) => item % 2);
          },
          total() {
            // setTimeout(() => {
            //   return this.num1 + this.num2 + this.num1 * this.num2;
            // }, 1000);
            return this.num1 + this.num2 + this.num1 * this.num2;
          },
        },
        methods: {
          fn() {
            // console.log(this.total);
            // this.total = 99;
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
